<template>
    <div _tmplitem="28" class="dv-full-screen-container" :style="css">
        <div _tmplitem="28" style="position: absolute;width:1920px;height:1080px;background-color:rgba(13, 42, 67);">
            <div _tmplitem="28" class="bigitem" style="top: 621px; left: 72px; width: 570px; height: 327px; transform: translate(0px, 0px); z-index: 1027;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-12 style="width:570px;height:327px" backgroundcolor="" :color="[]"></dv-border-box-12>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 64px; left: 1685px; width: 291px; height: 54px; transform: translate(0px, 0px); z-index: 1026;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;font-size:24px ;color:rgb(255, 255, 255) ;border-radius:0px;border-width:0px ;border-style:solid ;line-height:40px ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <titlecontrol _tmplitem="2" ref="sel169225483339992" :w="291" :h="54" :val="fromData.sel169225483339992" cssstyle="color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;"></titlecontrol>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 158px; left: 1055px; width: 120px; height: 40px; transform: translate(0px, 0px); z-index: 1025;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;font-size:22px ;color:rgba(83, 107, 242, 1) ;border-radius:0px;border-width:0px ;border-style:solid ;line-height:40px ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <titlecontrol _tmplitem="3" ref="sel169225475358968" :w="120" :h="40" :val="fromData.sel169225475358968" cssstyle="color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;"></titlecontrol>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 158px; left: 872px; width: 120px; height: 56px; transform: translate(0px, 0px); z-index: 1024;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;font-size:22px ;color:rgba(83, 107, 242, 1) ;border-radius:0px;border-width:0px ;border-style:solid ;line-height:40px ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <titlecontrol _tmplitem="4" ref="sel169225466787649" :w="120" :h="56" :val="fromData.sel169225466787649" cssstyle="color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;"></titlecontrol>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 209px; left: 1056px; width: 120px; height: 104px; transform: translate(0px, 0px); z-index: 1023;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;font-size:28px ;color:rgb(255, 255, 255) ;border-radius:0px;border-width:0px ;border-style:solid ;line-height:40px ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <titlecontrol _tmplitem="5" ref="sel169225322666657" :w="120" :h="104" :val="fromData.sel169225322666657" cssstyle="color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;"></titlecontrol>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 209px; left: 891px; width: 120px; height: 102px; transform: translate(0px, 0px); z-index: 1022;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;font-size:28px ;color:rgb(255, 255, 255) ;border-radius:0px;border-width:0px ;border-style:solid ;line-height:40px ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <titlecontrol _tmplitem="6" ref="sel169225321720458" :w="120" :h="102" :val="fromData.sel169225321720458" cssstyle="color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;"></titlecontrol>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 208px; left: 719px; width: 120px; height: 99px; transform: translate(0px, 0px); z-index: 1021;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;font-size:28px ;color:rgb(255, 255, 255) ;border-radius:0px;border-width:0px ;border-style:solid ;line-height:40px ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <titlecontrol _tmplitem="7" ref="sel169225320035863" :w="120" :h="99" :val="fromData.sel169225320035863" cssstyle="color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;"></titlecontrol>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 158px; left: 642px; width: 216px; height: 71px; transform: translate(0px, 0px); z-index: 1020;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;font-size:22px ;color:rgba(83, 107, 242, 1) ;border-radius:0px;border-width:0px ;border-style:solid ;line-height:40px ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <titlecontrol _tmplitem="8" ref="sel169225308297719" :w="216" :h="71" :val="fromData.sel169225308297719" cssstyle="color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;"></titlecontrol>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 324px; left: 629px; width: 631px; height: 313px; transform: translate(0px, 0px); z-index: 1019;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="9" ref="sel169224031454205" :options="fromData.sel169224031454205"></myechart>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 395px; left: 1277px; width: 556px; height: 201px; transform: translate(0px, 0px); z-index: 1018;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;height:190pxpx;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);"> </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 161px; left: 1279px; width: 554px; height: 203px; transform: translate(0px, 0px); z-index: 1017;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;height:190pxpx;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);"> </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 619px; left: 1272px; width: 591px; height: 369px; transform: translate(0px, 0px); z-index: 1016;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="12" ref="sel169224017099972" :options="fromData.sel169224017099972"></myechart>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 619px; left: 678px; width: 584px; height: 366px; transform: translate(0px, 0px); z-index: 1015;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="13" ref="sel169224015342706" :options="fromData.sel169224015342706"></myechart>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 621px; left: 78px; width: 586px; height: 367px; transform: translate(0px, 0px); z-index: 1014;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="14" ref="sel169224002819966" :options="fromData.sel169224002819966"></myechart>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 26px; left: 795px; width: 337px; height: 55px; transform: translate(0px, 0px); z-index: 1013;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;font-size:26px ;color:rgb(255, 255, 255) ;border-radius:0px;border-width:0px ;border-style:solid ;line-height:40px ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <titlecontrol _tmplitem="15" ref="sel169223988161280" :w="337" :h="55" :val="fromData.sel169223988161280" cssstyle="color: rgb(255, 255, 255); overflow: unset; text-overflow: unset; white-space: unset; background-image: none; background-clip: unset; -webkit-text-fill-color: initial;white-space:nowrap;"></titlecontrol>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 160px; left: 78px; width: 558px; height: 439px; transform: translate(0px, 0px); z-index: 1012;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <myechart _tmplitem="16" ref="sel16922385726086" :options="fromData.sel16922385726086"></myechart>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 985px; left: 1px; width: 1916px; height: 122px; transform: translate(0px, 0px); z-index: 1011;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-decoration-2 style="width:1916px;height:122px" :reverse="false" :color="[]"></dv-decoration-2>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 978px; left: 1616px; width: 441px; height: 138px; transform: translate(0px, 0px); z-index: 1010;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-decoration-8 style="width:441px;height:138px" :reverse="false" :color="[]"></dv-decoration-8>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 44px; left: 1751px; width: 226px; height: 82px; transform: translate(0px, 0px); z-index: 109;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;line-height:72px ;font-size:72px ;color:rgb(255, 255, 255) ;border-radius:0px;border-width:0px ;border-style:solid ;--animation:2s;--animation-flash:0.2s;transform:rotateZ(0deg)rotateY(0deg)   rotateX(0deg) ;"> </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 20px; left: 647px; width: 642px; height: 129px; transform: translate(0px, 0px); z-index: 108;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-decoration-5 style="width:642px;height:129px" :color="[]"></dv-decoration-5>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 619px; left: 1271px; width: 571px; height: 332px; transform: translate(0px, 0px); z-index: 107;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-12 style="width:571px;height:332px" backgroundcolor="" :color="[]"></dv-border-box-12>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 388px; left: 1270px; width: 570px; height: 213px; transform: translate(0px, 0px); z-index: 106;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-12 style="width:570px;height:213px" backgroundcolor="" :color="[]"></dv-border-box-12>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 318px; left: 670px; width: 571px; height: 285px; transform: translate(0px, 0px); z-index: 105;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-12 style="width:571px;height:285px" backgroundcolor="" :color="[]"></dv-border-box-12>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 158px; left: 1273px; width: 567px; height: 214px; transform: translate(0px, 0px); z-index: 104;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-12 style="width:567px;height:214px" backgroundcolor="" :color="[]"></dv-border-box-12>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 157px; left: 667px; width: 572px; height: 136px; transform: translate(0px, 0px); z-index: 103;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-12 style="width:572px;height:136px" backgroundcolor="" :color="[]"></dv-border-box-12>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 154px; left: 72px; width: 570px; height: 449px; transform: translate(0px, 0px); z-index: 102;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-12 style="width:570px;height:449px" backgroundcolor="" :color="[]"></dv-border-box-12>
                </div>
            </div>
            <div _tmplitem="28" class="bigitem" style="top: 620px; left: 670px; width: 571px; height: 329px; transform: translate(0px, 0px); z-index: 101;">
                <div _tmplitem="28" class="itemcontent " style="opacity:1;transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);">
                    <dv-border-box-12 style="width:571px;height:329px" backgroundcolor="" :color="[]"></dv-border-box-12>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import myechart from '@/components/myechart/newindex.vue'
    import titlecontrol from '@/components/titlecontrol.vue'
    import horseindex from '@/components/horseindex.vue'
    import textareaindex from '@/components/textareaindex.vue'
    import backgroundunit1 from '@/components/backgroundunit/backgroundunit1.vue'
    import backgroundunit2 from '@/components/backgroundunit/backgroundunit2.vue'
    import backgroundunit3 from '@/components/backgroundunit/backgroundunit3.vue'
    import backgroundunit4 from '@/components/backgroundunit/backgroundunit4.vue'
    import backgroundunit5 from '@/components/backgroundunit/backgroundunit5.vue'
    import backgroundunit7 from '@/components/backgroundunit/backgroundunit7.vue'
    import backgroundunit8 from '@/components/backgroundunit/backgroundunit8.vue'
    import backgroundunit9 from '@/components/backgroundunit/backgroundunit9.vue'
    import backgroundunit10 from '@/components/backgroundunit/backgroundunit10.vue'
    import backgroundunit11 from '@/components/backgroundunit/backgroundunit11.vue'
    import backgroundunit12 from '@/components/backgroundunit/backgroundunit12.vue'
    import myfabric from '@/components/myfabric/hotspot.vue'
    import bigimg from '@/components/bigImg.vue'
    import scrollgridlist from '@/components/scrollgridlist/index.vue'
    import scrollgridcolumn from '@/components/scrollgridlist/scrollgridcolumn.vue'
    export default {
        data() {
            return {
                "w": 1920,
                "css": "",
                "h": 1080,
                "bg": "",
                "bgColor": "rgba(13, 42, 67)",
                "fromData": {
                    "sel169225483339992": "",
                    "sel169225475358968": "缺料",
                    "sel169225466787649": "已生产批",
                    "sel169225322666657": "152个",
                    "sel169225321720458": "200个",
                    "sel169225320035863": "352个",
                    "sel169225308297719": "今日生产批",
                    "sel169224031454205": {
                        "title": {
                            "text": "本月产出率趋势",
                            "left": "11%",
                            "top": "3%",
                            "textStyle": {
                                "color": "#fff",
                                "fontSize": 16
                            }
                        },
                        "grid": {
                            "top": "22%",
                            "left": "10%",
                            "right": "10%",
                            "bottom": "15%",
                            "containLabel": true
                        },
                        "xAxis": {
                            "type": "category",
                            "boundaryGap": false,
                            "data": [1, 2, 3, 4, 5, 6],
                            "axisLabel": {
                                "margin": 30,
                                "color": "#ffffff63"
                            },
                            "axisLine": {
                                "show": true
                            },
                            "axisTick": {
                                "show": true,
                                "length": 25,
                                "lineStyle": {
                                    "color": "#ffffff1f"
                                }
                            },
                            "splitLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#ffffff1f"
                                }
                            }
                        },
                        "yAxis": [{
                            "type": "value",
                            "boundaryGap": false,
                            "position": "left",
                            "axisLabel": {
                                "margin": 20,
                                "color": "#ffffff63"
                            },
                            "axisTick": {
                                "show": true,
                                "length": 15,
                                "lineStyle": {
                                    "color": "#ffffff1f"
                                }
                            },
                            "splitLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#ffffff1f"
                                }
                            },
                            "axisLine": {
                                "lineStyle": {
                                    "color": "#fff",
                                    "width": 2
                                }
                            }
                        }],
                        "series": [{
                            "name": "注册总量",
                            "type": "line",
                            "smooth": true,
                            "showAllSymbol": true,
                            "symbol": "circle",
                            "symbolSize": 6,
                            "lineStyle": {
                                "normal": {
                                    "color": "#fff"
                                }
                            },
                            "label": {
                                "show": true,
                                "position": "top",
                                "textStyle": {
                                    "color": "#fff"
                                }
                            },
                            "itemStyle": {
                                "color": "red",
                                "borderColor": "#fff",
                                "borderWidth": 3
                            },
                            "tooltip": {
                                "show": false
                            },
                            "areaStyle": {
                                "normal": {
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "#eb64fb"
                                        }, {
                                            "offset": 1,
                                            "color": "#3fbbff0d"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    }
                                }
                            },
                            "data": [99, 97, 94, 90, 85, 100]
                        }]
                    },
                    "sel169224017099972": {
                        "title": {
                            "text": "批号：xxx配料情况",
                            "textStyle": {
                                "align": "center",
                                "color": "#fff",
                                "fontSize": 20
                            },
                            "top": "2%",
                            "left": "4%"
                        },
                        "grid": {
                            "top": "20%",
                            "bottom": "22%"
                        },
                        "legend": {
                            "data": ["理论", "实际"],
                            "top": "15%",
                            "itemWidth": 30,
                            "itemHeight": 12,
                            "itemGap": 50,
                            "textStyle": {
                                "fontSize": 18
                            }
                        },
                        "tooltip": {
                            "trigger": "axis",
                            "axisPointer": {
                                "type": "shadow",
                                "label": {
                                    "show": true
                                }
                            }
                        },
                        "xAxis": {
                            "data": ["物料1", "物料2", "物料3", "物料4", "物料5", "物料6"],
                            "axisLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#01FCE3"
                                }
                            },
                            "axisTick": {
                                "show": true
                            },
                            "axisLabel": {
                                "show": true,
                                "textStyle": {
                                    "color": "#ebf8ac",
                                    "fontSize": 16
                                }
                            }
                        },
                        "yAxis": [{
                            "type": "value",
                            "nameTextStyle": {
                                "color": "#ebf8ac"
                            },
                            "splitLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": true
                            },
                            "axisLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#FFFFFF"
                                }
                            },
                            "axisLabel": {
                                "show": true,
                                "textStyle": {
                                    "color": "#ebf8ac",
                                    "fontSize": 14
                                }
                            }
                        }, {
                            "type": "value",
                            "gridIndex": 0,
                            "min": 0,
                            "max": 100,
                            "splitNumber": 10,
                            "splitLine": {
                                "show": false
                            },
                            "axisLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": false
                            },
                            "axisLabel": {
                                "show": false
                            },
                            "splitArea": {
                                "show": true,
                                "areaStyle": {
                                    "color": ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                                }
                            }
                        }],
                        "series": [{
                            "name": "理论",
                            "type": "bar",
                            "barWidth": 15,
                            "itemStyle": {
                                "normal": {
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "#2d8bef"
                                        }, {
                                            "offset": 1,
                                            "color": "#4693EC"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    }
                                }
                            },
                            "data": [10, 20, 5, 40, 50, 60]
                        }, {
                            "name": "实际",
                            "type": "bar",
                            "barWidth": 15,
                            "itemStyle": {
                                "normal": {
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "#00FFE3"
                                        }, {
                                            "offset": 1,
                                            "color": "#4693EC"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    }
                                }
                            },
                            "data": [11, 18, 6, 42, 53, 62]
                        }]
                    },
                    "sel169224015342706": {
                        "title": {
                            "text": "批号：xxx配料情况",
                            "textStyle": {
                                "align": "center",
                                "color": "#fff",
                                "fontSize": 20
                            },
                            "top": "2%",
                            "left": "4%"
                        },
                        "grid": {
                            "top": "20%",
                            "bottom": "22%"
                        },
                        "legend": {
                            "data": ["理论", "实际"],
                            "top": "15%",
                            "itemWidth": 30,
                            "itemHeight": 12,
                            "itemGap": 50,
                            "textStyle": {
                                "fontSize": 18
                            }
                        },
                        "tooltip": {
                            "trigger": "axis",
                            "axisPointer": {
                                "type": "shadow",
                                "label": {
                                    "show": true
                                }
                            }
                        },
                        "xAxis": {
                            "data": ["物料1", "物料2", "物料3", "物料4", "物料5", "物料6"],
                            "axisLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#01FCE3"
                                }
                            },
                            "axisTick": {
                                "show": true
                            },
                            "axisLabel": {
                                "show": true,
                                "textStyle": {
                                    "color": "#ebf8ac",
                                    "fontSize": 16
                                }
                            }
                        },
                        "yAxis": [{
                            "type": "value",
                            "nameTextStyle": {
                                "color": "#ebf8ac"
                            },
                            "splitLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": true
                            },
                            "axisLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#FFFFFF"
                                }
                            },
                            "axisLabel": {
                                "show": true,
                                "textStyle": {
                                    "color": "#ebf8ac",
                                    "fontSize": 14
                                }
                            }
                        }, {
                            "type": "value",
                            "gridIndex": 0,
                            "min": 0,
                            "max": 100,
                            "splitNumber": 10,
                            "splitLine": {
                                "show": false
                            },
                            "axisLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": false
                            },
                            "axisLabel": {
                                "show": false
                            },
                            "splitArea": {
                                "show": true,
                                "areaStyle": {
                                    "color": ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                                }
                            }
                        }],
                        "series": [{
                            "name": "理论",
                            "type": "bar",
                            "barWidth": 15,
                            "itemStyle": {
                                "normal": {
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "#2d8bef"
                                        }, {
                                            "offset": 1,
                                            "color": "#4693EC"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    }
                                }
                            },
                            "data": [10, 20, 5, 40, 50, 60]
                        }, {
                            "name": "实际",
                            "type": "bar",
                            "barWidth": 15,
                            "itemStyle": {
                                "normal": {
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "#00FFE3"
                                        }, {
                                            "offset": 1,
                                            "color": "#4693EC"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    }
                                }
                            },
                            "data": [11, 18, 6, 42, 53, 62]
                        }]
                    },
                    "sel169224002819966": {
                        "title": {
                            "text": "批号：xxx配料情况",
                            "textStyle": {
                                "align": "center",
                                "color": "#fff",
                                "fontSize": 20
                            },
                            "top": "2%",
                            "left": "4%"
                        },
                        "grid": {
                            "top": "20%",
                            "bottom": "22%"
                        },
                        "legend": {
                            "data": ["理论", "实际"],
                            "top": "15%",
                            "itemWidth": 30,
                            "itemHeight": 12,
                            "itemGap": 50,
                            "textStyle": {
                                "fontSize": 18
                            }
                        },
                        "tooltip": {
                            "trigger": "axis",
                            "axisPointer": {
                                "type": "shadow",
                                "label": {
                                    "show": true
                                }
                            }
                        },
                        "xAxis": {
                            "data": ["物料1", "物料2", "物料3", "物料4", "物料5", "物料6"],
                            "axisLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#01FCE3"
                                }
                            },
                            "axisTick": {
                                "show": true
                            },
                            "axisLabel": {
                                "show": true,
                                "textStyle": {
                                    "color": "#ebf8ac",
                                    "fontSize": 16
                                }
                            }
                        },
                        "yAxis": [{
                            "type": "value",
                            "nameTextStyle": {
                                "color": "#ebf8ac"
                            },
                            "splitLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": true
                            },
                            "axisLine": {
                                "show": true,
                                "lineStyle": {
                                    "color": "#FFFFFF"
                                }
                            },
                            "axisLabel": {
                                "show": true,
                                "textStyle": {
                                    "color": "#ebf8ac",
                                    "fontSize": 14
                                }
                            }
                        }, {
                            "type": "value",
                            "gridIndex": 0,
                            "min": 0,
                            "max": 100,
                            "splitNumber": 10,
                            "splitLine": {
                                "show": false
                            },
                            "axisLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": false
                            },
                            "axisLabel": {
                                "show": false
                            },
                            "splitArea": {
                                "show": true,
                                "areaStyle": {
                                    "color": ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                                }
                            }
                        }],
                        "series": [{
                            "name": "理论",
                            "type": "bar",
                            "barWidth": 15,
                            "itemStyle": {
                                "normal": {
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "#2d8bef"
                                        }, {
                                            "offset": 1,
                                            "color": "#4693EC"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    }
                                }
                            },
                            "data": [10, 20, 5, 40, 50, 60]
                        }, {
                            "name": "实际",
                            "type": "bar",
                            "barWidth": 15,
                            "itemStyle": {
                                "normal": {
                                    "color": {
                                        "colorStops": [{
                                            "offset": 0,
                                            "color": "#00FFE3"
                                        }, {
                                            "offset": 1,
                                            "color": "#4693EC"
                                        }],
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false
                                    }
                                }
                            },
                            "data": [11, 18, 6, 42, 53, 62]
                        }]
                    },
                    "sel169223988161280": "片仔癀生产配料情况大屏面板",
                    "sel16922385726086": {
                        "title": [{
                            "text": "本月生产情况",
                            "textStyle": {
                                "fontSize": 22,
                                "color": "white"
                            },
                            "left": "2%",
                            "top": "1%"
                        }],
                        "grid": {
                            "left": -100,
                            "top": 50,
                            "bottom": 10,
                            "right": 10,
                            "containLabel": true
                        },
                        "tooltip": {
                            "trigger": "item",
                            "formatter": "{b} : {c} ({d}%)"
                        },
                        "legend": {
                            "type": "scroll",
                            "orient": "vertical",
                            "bottom": "center",
                            "right": "7",
                            "itemWidth": 28,
                            "itemHeight": 14,
                            "itemGap": 7,
                            "textStyle": {
                                "color": "#",
                                "fontSize": 18
                            },
                            "data": ["产品1", "产品2", "产品3", "产品4", "产品5"]
                        },
                        "polar": {},
                        "angleAxis": {
                            "interval": 1,
                            "type": "category",
                            "data": [],
                            "z": 10,
                            "axisLine": {
                                "show": false,
                                "lineStyle": {
                                    "color": "#0B4A6B",
                                    "width": 1,
                                    "type": "solid"
                                }
                            },
                            "axisLabel": {
                                "interval": 0,
                                "show": true,
                                "color": "#0B4A6B",
                                "margin": 8,
                                "fontSize": 16
                            }
                        },
                        "radiusAxis": {
                            "min": 0,
                            "max": 100,
                            "interval": 20,
                            "axisLine": {
                                "show": false,
                                "lineStyle": {
                                    "color": "blue",
                                    "width": 1,
                                    "type": "solid"
                                }
                            },
                            "axisLabel": {
                                "formatter": "{value} %",
                                "show": false,
                                "padding": [0, 0, 20, 0],
                                "color": "red",
                                "fontSize": 16
                            },
                            "splitLine": {
                                "lineStyle": {
                                    "color": "#0B3E5E",
                                    "width": 2,
                                    "type": "solid"
                                }
                            }
                        },
                        "calculable": true,
                        "series": [{
                            "type": "pie",
                            "radius": ["4%", "7%"],
                            "hoverAnimation": false,
                            "labelLine": {
                                "normal": {
                                    "show": false,
                                    "length": 30,
                                    "length2": 55
                                },
                                "emphasis": {
                                    "show": false
                                }
                            },
                            "data": [{
                                "name": "",
                                "value": 0,
                                "itemStyle": {
                                    "normal": {
                                        "color": "#0B4A6B"
                                    }
                                }
                            }]
                        }, {
                            "type": "pie",
                            "radius": ["79%", "82%"],
                            "hoverAnimation": false,
                            "labelLine": {
                                "normal": {
                                    "show": false,
                                    "length": 30,
                                    "length2": 55
                                },
                                "emphasis": {
                                    "show": false
                                }
                            },
                            "name": "",
                            "data": [{
                                "name": "",
                                "value": 10,
                                "itemStyle": {
                                    "normal": {
                                        "color": "#0B4A6B"
                                    }
                                }
                            }]
                        }, {
                            "stack": "a",
                            "type": "pie",
                            "radius": ["15%", "75%"],
                            "roseType": "area",
                            "zlevel": 10,
                            "label": {
                                "normal": {
                                    "show": true,
                                    "formatter": "{c}",
                                    "textStyle": {
                                        "fontSize": 18
                                    },
                                    "position": "inside"
                                },
                                "emphasis": {
                                    "show": true
                                }
                            },
                            "labelLine": {
                                "normal": {
                                    "show": true,
                                    "length": 20,
                                    "length2": 55
                                },
                                "emphasis": {
                                    "show": false
                                }
                            },
                            "data": [{
                                "value": 10,
                                "name": "产品1"
                            }, {
                                "value": 15,
                                "name": "产品2"
                            }, {
                                "value": 20,
                                "name": "产品3"
                            }, {
                                "value": 25,
                                "name": "产品4"
                            }, {
                                "value": 30,
                                "name": "产品5"
                            }]
                        }]
                    }
                },
                "controlTimer": {}
            }
        },
        methods: {
            created_sys() {
                ///系统方法 判断页面大小 使其自动适应
                let $this = this
                this.w = this.w === undefined ? 1920 : this.w
                $this.css = `  width: ${$this.w}px;height: ${$this.h}px; ${$this.bg === "" ? "" : "background-image:url(" + $this.bg + ");background-size: contain;"
                    }  transform: scale(${document.body.clientWidth / $this.w});  ${$this.bgColor === ""
                        ? ""
                        : "background-color:" +
                        $this.bgColor +
                        ";left:calc( 50% - " +
                        $this.w / 2 +
                        "px);"
                    }`

                window.addEventListener("resize", () => {
                    $this.css = `  width: ${$this.w}px;height: ${$this.h}px; ${$this.bg === "" ? "" : "background-image:url(" + $this.bg + ");    background-size: contain;"
                        }  transform: scale(${document.body.clientWidth / $this.w}); ${$this.bgColor === ""
                            ? ""
                            : "background-color:" + $this.bgColor + ";"
                        }`
                })
                $this.css = `transform: scale(${document.body.clientWidth / $this.w})`

            },
            funmounted_sys() {
                this.apiComm('/ui/common/testExecuteApi', {
                    "sqlcontent": "select pr02_id_item, c102_var_item name, sum(pr02_dec_plan)\r\n`value`\r\nfrom prod02\r\nLEFT JOIN ctlm102 on c102_id = pr02_id_item\r\nwhere MONTH(pr02_date_plan) = MONTH(NOW())\r\nand pr02_flag_state = \"正常\"\r\nGROUP BY pr02_id_item, c102_var_item\r\nORDER BY sum(pr02_dec_plan) desc;",
                    "paramjsonsrt": [],
                    "apitype": "LIST"
                }).then((res) => {
                    if (res.code === 0) {
                        this.fromData['sel16922385726086_dataconfig'] = res;
                        this.fromData['sel16922385726086'].series[2].data = this.fromData['sel16922385726086_dataconfig'].data;
                        this.fromData['sel16922385726086'].legend.data = this.fromData['sel16922385726086_dataconfig'].data;
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            }
        },
        created() {
            this.created_sys()
            if (this.loadfunmounted !== undefined) {
                this.loadfunmounted()
            }

        },
        destroyed() {
            for (let key in this.controlTimer) {
                clearInterval(this.controlTimer[key]);
                this.controlTimer[key] = null
            }
        },
        components: {
            myechart,
            titlecontrol,
            horseindex,
            textareaindex,
            backgroundunit1,
            backgroundunit2,
            backgroundunit3,
            backgroundunit4,
            backgroundunit5,
            backgroundunit7,
            backgroundunit8,
            backgroundunit9,
            backgroundunit10,
            backgroundunit11,
            backgroundunit12,
            bigimg,
            myfabric,
            scrollgridlist,
            scrollgridcolumn
        }
    }
</script>
<style scoped>
    .dv-full-screen-container {
        transform: scale(1);
        position: absolute;
        top: 0px;
        left: 0px;
        overflow: hidden;
        transform-origin: left top;
        z-index: 499;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        width: 1920px;
        height: 1080px;
        background-color: '#040404';
        background-size: cover;
    }

    .bigitem {
        position: absolute;
        will-change: transform;
        overflow: hidden;
    }

    .layouttable {
        height: 100%;
        display: flex;
    }

    .layouttable .layouttable-item {
        height: 100%;
        position: relative;
        float: left;
    }

    .itemcontent {
        width: 100%;
        height: 100%;
    }
</style>
<style scoped></style>